<!--
 * @FilePath: /web-vue/src/views/SysLog/editForm.vue
 * @Description: 【系统日志】编辑表单
-->
<template>
  <div>
    <!-- 弹出层-表单 -->
    <el-dialog
      class="edit-dialog"
      title="系统详情"
      :visible.sync="visible"
      :confirmLoading="confirmLoading"
      top="7vh"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :fullscreen="false"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editForm"
        status-icon
        label-width="150px"
        style="width: 100%"
        class="layer-form-style"
      >
        <el-form-item label="ID：" prop="id" size="mini">
          <el-input v-model="editForm.id" ID readOnly></el-input>
        </el-form-item>
        <el-form-item label="操作人ID：" prop="operatorId" size="mini">
          <el-input
            v-model="editForm.operatorId"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="操作人：" prop="operator" size="mini">
          <el-input
            v-model="editForm.operator"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="操作内容：" prop="operation" size="mini">
          <el-input
            v-model="editForm.operation"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="操作时间：" prop="operationTime" size="mini">
          <el-date-picker
            v-model="editForm.operationTime"
            type="datetime"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="DateTime_Picker_Option"
            readOnly
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请求方式：" prop="requestMethod" size="mini">
          <el-input
            v-model="editForm.requestMethod"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="资源路径：" prop="resourcePath" size="mini">
          <el-input
            v-model="editForm.resourcePath"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status" size="mini">
          <el-select
            v-model="editForm.status"
            filterable
            clearable
            style="width: 99%"
            readOnly
          >
            <el-option
              v-for="item in $store.state.DICT.apiStatusSelect"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="耗时：" prop="consumeTime" size="mini">
          <el-input
            v-model="editForm.consumeTime"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="客户端IP：" prop="clientIp" size="mini">
          <el-input
            v-model="editForm.clientIp"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="详细信息：" prop="detailMsg" size="mini">
          <el-input
            type="textarea"
            v-model="editForm.detailMsg"
            :autosize="{ minRows: 3, maxRows: 9 }"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
        <el-form-item label="异常信息：" prop="exceptionMsg" size="mini">
          <el-input
            type="textarea"
            v-model="editForm.exceptionMsg"
            :autosize="{ minRows: 3, maxRows: 9 }"
            clearable
            style="width: 99%"
            readOnly
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-refresh-left" @click="handleCancel()"
          >关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const DateTime_Picker_Option = {
  shortcuts: [
    {
      text: "今天",
      onClick(picker) {
        picker.$emit("pick", new Date());
      },
    },
    {
      text: "昨天",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24);
        picker.$emit("pick", date);
      },
    },
    {
      text: "一周前",
      onClick(picker) {
        const date = new Date();
        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit("pick", date);
      },
    },
  ],
};

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      editForm: {
        id: null,
        operatorId: null,
        operation: null,
        requestMethod: null,
        resourcePath: null,
        status: null,
        consumeTime: null,
        operationTime: null,
        clientIp: null,
        detailMsg: null,
        exceptionMsg: null,
        operator: null,
      },
      // 表单校验规则
      rules: {
        id: [
          {
            required: true,
            message: "ID不能为空！",
            trigger: "blur",
          },
        ],
        operatorId: [
          {
            required: true,
            message: "操作人ID不能为空！",
            trigger: "blur",
          },
        ],
        operation: [
          {
            required: true,
            message: "操作内容不能为空！",
            trigger: "blur",
          },
        ],
        requestMethod: [
          {
            required: true,
            message: "请求方式不能为空！",
            trigger: "blur",
          },
        ],
        resourcePath: [
          {
            required: true,
            message: "资源路径不能为空！",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "状态不能为空！",
            trigger: "blur",
          },
        ],
        operationTime: [
          {
            required: true,
            message: "操作时间不能为空！",
            trigger: "blur",
          },
        ],
      },
      // 日期选择快捷方式
      DateTime_Picker_Option,
    };
  },

  methods: {
    // 打开【系统日志】表单编辑窗口
    openEditForm(isShow, item) {
      this.visible = isShow;
      // 【系统日志】编辑信息填充（延迟执行，确保子组件初始化）
      setTimeout(() => {
        // 赋值
        this.editForm.id = item.id;
        this.editForm.operatorId = item.operatorId;
        this.editForm.operation = item.operation;
        this.editForm.requestMethod = item.requestMethod;
        this.editForm.resourcePath = item.resourcePath;
        this.editForm.status = item.status;
        this.editForm.consumeTime = item.consumeTime;
        this.editForm.operationTime = item.operationTime;
        this.editForm.clientIp = item.clientIp;
        this.editForm.detailMsg = item.detailMsg;
        this.editForm.exceptionMsg = item.exceptionMsg;
        this.editForm.operator = item.operator;
        // 清除表单校验结果
        this.$refs["editForm"].clearValidate();
      }, 1);
    },

    // 关闭【系统日志】表单编辑窗口
    handleCancel() {
      this.visible = false;
      this.$refs["editForm"].resetFields();
    },

    // 提交
    handleSubmit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            target: document.querySelector(".edit-dialog"),
            lock: true,
            text: "正在保存，请耐心等待！",
          });

          let vueIns = this;
          // 请求参数
          let param = Object.assign({}, this.editForm);
          // 发起请求
          this.$api
            .modifySysLog(param)
            .then((res) => {
              loading.close();
              let { status, message, data } = res.data; // 响应数据
              if (status == 200) {
                this.$emit("afterSubmit");
                this.handleCancel();
                // 提示信息
                this.$message({
                  type: "success",
                  message: `操作成功！已编辑【系统日志】!${message}`,
                  duration: 1680,
                });
              } else if (status == 403) {
                this.$message({
                  message: `权限不足！${message}`,
                  type: "error",
                  center: true,
                  duration: 1680,
                });
                // this.$router.push("/login");
              } else {
                this.$alert(`操作失败！${message}`, "【系统日志】编辑", {
                  type: "error",
                  confirmButtonText: "确定",
                  callback: (action) => {},
                });
              }
            })
            .catch(function (err) {
              loading.close();
              vueIns.visible = false;
              console.log(`【系统日志】编辑接口发生错误：${err}`);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 表单布局样式
@import "@/assets/css/form-layout.scss";
</style>
